今天我們要來介紹
如何把資料呈現再畫面上啦~~~
我們先看看如何撰寫

function updateList(items){
    let str = '';
    let itemsLen = items.length;
    for(let i = 0 ; i < itemsLen ; i++){
        str+= `<li>
                    <i class="fas fa-trash text-danger mr-3 mb-2 trash" data-index = ${i}>
                    </i>
                    <span>${items[i].content}</span>
                </li>
            `
    }
    list.innerHTML = str;
}

這裡我們利用到的技巧為 ES6 + dataset + 組字串
跟前面提到的innerHTML是不是很像!!
ES6: 反引號包裹要組的字串 變數用 ${}包裹
不過這裡要注意一點
我們有使用 dataset 的技巧
這樣有利於我們接下來要介紹的刪除代辦事項

刪除代辦事項
這裡我們使用到陣列的splice方法

function deleteData(e){
    e.preventDefault();
    if(e.target.nodeName !== 'I'){return};
    var index = e.target.dataset.index;
    data.splice(index, 1);
    localStorage.setItem('listData', JSON.stringify(data));
    updateList(data);
}

當然刪除後
也是要 更新畫面資料 與 更新localStorage

最後附上練習的原始碼
CodePen:https://codepen.io/wemyferb/pen/KKMPpOP
明天我們將會介紹
如何計算 BMI
過重的要面對現實囉!!!
有沒有緊張呢!!

那todoList的部分就到這裡囉
有任何問題都可以詢問我唷!!